<!--
 * @Author: FengTeng
 * @Date: 2021-02-20 08:47:27
 * @LastEditTime: 2021-03-03 18:30:11
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\views\products-manage\ProductsManage.vue
-->
<template>
  <div class="products-manage" v-if="userPermissions.customerPool.lookSearch">
    <div class="pool-item">
      <el-select
        class="search-select"
        v-model="searchFormData.searchItem"
        @change="handleSelectClick()"
        placeholder="请选择查询项"
      >
        <el-option
          v-for="item in searchFormInfo.searchItems"
          :key="item.itemKey"
          :label="item.label"
          :value="item.itemKey"
        ></el-option>
      </el-select>
      <el-input class="search-input" v-model="searchFormData.searchValue" placeholder="请输入查询内容"></el-input>
    </div>
    <div class="pool-item">
      <el-date-picker
        class="created-date"
        v-model="searchFormData.createdDate"
        type="date"
        placeholder="请选择创建时间"
      ></el-date-picker>
    </div>
    <el-button class="search-button" type="primary" :loading="searchFormInfo.searchLoading" @click="handleSearch()"
      >查询</el-button
    >
    <br />
    <el-button class="create-new-product" type="success" :loading="createLoading" @click="handleCreateProduct()"
      >建立新商品</el-button
    >
    <br />
    <products-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :columnSet="columnSet"
      @page-change="handlePageChange($event)"
      @selected-change="handleSelectedChange($event)"
    ></products-table>
    <create-product-modal
      ref="createProductModalRef"
      :modalConfig="createProductConfig"
      @refresh-table="requestProductsTableData()"
    ></create-product-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import ProductsTable from "@/components/table/products-table/ProductsTable.vue";
import CreateProductModal from "@/components/modal/create-product-modal/CreateProductModal";
import { mapState } from "vuex";
export default {
  name: "ProductsManage",
  components: {
    ProductsTable,
    CreateProductModal
  },
  data() {
    return {
      searchFormData: {
        searchItem: "请选择查询项",
        searchValue: "",
        createdDate: ""
      },
      searchFormInfo: {
        searchItems: [
          {
            label: "请选择查询项",
            itemKey: "else"
          },
          {
            label: "商品名称",
            itemKey: "name"
          },
          {
            label: "负责人",
            itemKey: "fuzeren"
          }
        ],
        searchLoading: false
      },
      createLoading: false,
      tableConfig: {
        // 分页配置
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        }
      },
      tableData: [],
      columnSet: [
        {
          label: "序号",
          prop: "productID",
          align: "center"
        },
        {
          label: "商品名称",
          prop: "productName",
          width: "160",
          align: "center"
        },
        {
          label: "商品类型",
          prop: "productType",
          align: "center"
        },
        {
          label: "价格",
          prop: "productPrice",
          align: "center"
        },
        {
          label: "数量",
          prop: "productNumber",
          align: "center"
        },
        {
          label: "负责人",
          prop: "director",
          align: "center"
        },
        {
          label: "创建时间",
          prop: "createdDate",
          align: "center"
        },
        {
          label: "销售数量",
          prop: "saleNumber",
          align: "center"
        },
        {
          label: "操作",
          prop: "option",
          align: "center",
          customSlot: "customSlot"
        }
      ],
      createProductConfig: {
        visible: false,
        CloseOnClickModal: false, // 是否允许点击遮罩层关闭弹窗
        showClose: true // 是否显示右上角关闭按钮
      }
    };
  },
  created() {
    this.initProductsTableData();
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    })
  },
  methods: {
    // 初始化表格
    initProductsTableData() {
      console.log("调接口1");
      this.requestProductsTableData();
    },
    // 请求表格接口
    requestProductsTableData() {
      $.post(
        apis.getProductsTable,
        {
          pageIndex: this.tableConfig.pageConfig.page,
          pageSize: this.tableConfig.pageConfig.pageSize,
          type: "paging"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            this.setProductsTableData(resp.data.tableData);
            this.tableConfig.pageConfig.total = resp.data.total;
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    // set表格数据
    setProductsTableData(tableData) {
      this.tableData = [];
      tableData.forEach(item => {
        let row = {
          productID: "",
          productName: "",
          productType: "",
          productPrice: "",
          productNumber: 0,
          director: "",
          createdDate: "",
          saleNumber: 0,
          option: ""
        };
        row.productID = item.id;
        row.productName = item.name;
        row.productType = item.leixin;
        row.productPrice = item.jiage;
        row.productNumber = item.number;
        row.director = item.fuzeren;
        row.createdDate = item.changjianshijian;
        row.saleNumber = item.xiaoshoushuliang || 0;
        row.option = item.zhuangtai==="上架"?"下架":"上架";
        this.tableData.push(row);
      });
    },
    // 搜索类型选择
    handleSelectClick() {},
    // 搜索事件
    handleSearch() {
      console.log("搜索事件");
      this.searchFormInfo.searchLoading = true;
      let createdDate;
      if (this.searchFormData.createdDate !== "") {
        createdDate = new Date(+new Date(this.searchFormData.createdDate) + (8 * 3600 * 1000));
      createdDate = this.formatDate(createdDate);
      } else {
        createdDate = this.searchFormData.createdDate;
      }
      this.tableConfig.pageConfig.page = 1;
      let that = this;
      $.post(
        apis.productsManageSearch,
        {
          type: "select",
          type1: this.searchFormData.searchItem,
          data: this.searchFormData.searchValue,
          starttime: createdDate
          // pageIndex: this.tableConfig.pageConfig.page,
          // pageSize: this.tableConfig.pageConfig.pageSize
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            resp.data = [...resp.data.slice(0, 9)];
            that.setProductsTableData(resp.data);
            that.tableConfig.pageConfig.total = 10;
            that.searchFormData.createdDate = "";
          } else {
            this.$message.error(resp.msg);
          }
          this.searchFormInfo.searchLoading = false;
        }
      );
      setTimeout(() => {
        this.searchFormInfo.searchLoading = false;
      }, 1000);
    },
    // 新建商品，实现在弹窗组件
    handleCreateProduct() {
      this.$refs.createProductModalRef.openModal();
    },
    // 商品上下架
    handleSelectedChange(event) {
      console.log(event.productID, event.option);
      if (this.userPermissions.productsManage.productShelf) {
        $.post(
          apis.setProductStatus,
          {
            id: event.productID,
            zhuangtai: event.option,
            type: "update"
          },
          resp => {
            resp = JSON.parse(resp);
            if (resp.code === "ok") {
              this.productShelf(event);
              this.$message.success(resp.msg);
            } else {
              this.$message.error(resp.msg);
            }
          }
        );
      } else {
        this.$message.warning("用户没有对应权限！");
      }
    },
    // 上下架状态前端更改
    productShelf(event) {
      console.log(event);
      // 调接口更新状态
      if (event.option === "上架") {
        event.option = "下架";
      } else if (event.option === "下架") {
        event.option = "上架";
      }
    },
    handlePageChange(event) {
      console.log(event);
      this.tableConfig.pageConfig.page = event;
      this.requestProductsTableData();
    },
    formatDate(date) {
      let fmtDate = date.toISOString();
      fmtDate = fmtDate.split("T")[0].replaceAll("-", "");
      return fmtDate.toString();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
